<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../css/styles.css"> <!-- 确保引入正确的 CSS 文件 -->
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <title>注册 - 题海</title>
</head>
<body>
<!-- 动态背景 -->
<div class="background"></div>

<!-- 注册表单 -->
<section class="container">
    <h2>欢迎注册<b class="art-text">题海</b></h2>

    <!-- 错误信息 -->
    <div id="error-message" class="error-message" style="display: none;"></div>

    <!-- 注册表单 -->
    <form id="enroll-form">
        <div class="form">
            <input type="text" id="account" name="account" placeholder="账号/手机号" required>
            <input type="password" id="userPwd" name="userPwd" placeholder="密码" required>
            <input type="text" id="userName" name="userName" placeholder="用户名" required>
            <select id="sex" name="sex" required>
                <option value="" disabled selected>请选择性别</option>
                <option value="男">男</option>
                <option value="女">女</option>
                <option value="保密">保密</option>
            </select>
            <textarea id="introduction" name="introduction" placeholder="个人简介（可选）"></textarea>
            <div class="form-actions">
                <button type="submit" class="btn-login">注册</button>
                <a href="../login.html" class="btn-login">返回登录</a>
            </div>
        </div>
    </form>
</section>

<script>
    // 处理注册表单提交
    document.getElementById('enroll-form').addEventListener('submit', function (event) {
        event.preventDefault(); // 阻止表单默认提交行为

        const formData = new FormData(event.target);
        formData.append("action", "insert"); // 添加 action 参数

        axios.post('/TiHai/users', new URLSearchParams(formData), {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
            .then(response => {
                if (response.data.success) {
                    alert("注册成功！");
                    window.location.href = 'login.html';
                } else {
                    // 显示错误信息
                    document.getElementById('error-message').style.display = 'block';
                    document.getElementById('error-message').innerText = response.data.message;
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('注册失败，请稍后重试或联系管理员');
            });
    });
</script>
</body>
</html>